<template>
  <div class="file-explorer">
    <!-- 工具栏 -->
    <Toolbar />

    <div class="explorer-content">
      <!-- 侧边栏 -->
      <Sidebar />

      <!-- 主内容区 -->
      <FileGrid />
    </div>

    <!-- 右键菜单 -->
    <ContextMenu
      :visible="uiState.contextMenu.visible"
      :position="uiState.contextMenu.position"
      :selected-item="selectedFileItem"
      :can-paste="canPaste"
      @open="() => fileOps.openItem(fileStore.selectedItem!)"
      @open-with="fileOps.showOpenWithDialog"
      @copy="fileOps.copyItem"
      @cut="fileOps.cutItem"
      @paste="fileOps.pasteItem"
      @delete="fileOps.deleteItem"
      @rename="fileOps.renameItem"
      @properties="fileOps.showProperties"
      @new-folder="fileOps.createNewFolder"
      @new-file="fileOps.createNewFile"
      @refresh="fileOps.refresh"
      @hide="uiState.hideContextMenu"
    />

    <!-- 属性对话框 -->
    <PropertiesDialog
      v-model="uiState.propertiesVisible.value"
      :item="selectedFileItem"
    />

    <!-- 重命名对话框 -->
    <el-dialog
      v-model="uiState.renameDialogVisible.value"
      title="重命名"
      width="400px"
    >
      <el-input
        v-model="uiState.newName.value"
        placeholder="请输入新名称"
        @keyup.enter="uiState.confirmRename"
      />
      <template #footer>
        <el-button @click="uiState.cancelRename"> 取消 </el-button>
        <el-button type="primary" @click="uiState.confirmRename">
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted } from "vue";
import { useFileStore } from "../stores/fileStore";
import { useFileOperations } from "../hooks/useFileOperations";
import { useKeyboard } from "../hooks/useKeyboard";
import { useUIState } from "../hooks/useUIState";
import { formatFileSize, formatDate } from "../utils/fileUtils";

// 组件导入
import Toolbar from "./Toolbar.vue";
import Sidebar from "./Sidebar.vue";
import FileGrid from "./FileGrid.vue";
import ContextMenu from "./ContextMenu.vue";
import PropertiesDialog from "./PropertiesDialog.vue";

// Hooks
const fileStore = useFileStore();
const uiState = useUIState();
const fileOps = useFileOperations(uiState);

// 设置键盘事件监听
useKeyboard(uiState);

// 空白区域右键菜单处理
const handleEmptyAreaContextMenu = (event: CustomEvent) => {
  const { x, y } = event.detail;
  // 清除选中项，确保显示空白区域菜单
  fileStore.clearSelection();
  uiState.showContextMenu(x, y);
};

// 监听空白区域右键菜单事件
onMounted(() => {
  document.addEventListener(
    "empty-area-contextmenu",
    handleEmptyAreaContextMenu as EventListener
  );
});

onUnmounted(() => {
  document.removeEventListener(
    "empty-area-contextmenu",
    handleEmptyAreaContextMenu as EventListener
  );
});

// 转换为组件使用的格式
const selectedFileItem = computed(() => {
  if (!fileStore.selectedItem) return null;

  return {
    name: fileStore.selectedItem.name,
    type: fileStore.selectedItem.type,
    size: fileStore.selectedItem.size
      ? formatFileSize(fileStore.selectedItem.size)
      : undefined,
    modifiedDate: formatDate(fileStore.selectedItem.lastModified),
    extension: fileStore.selectedItem.extension,
    path: fileStore.currentPath + "/" + fileStore.selectedItem.name,
  };
});

// 检查是否可以粘贴
const canPaste = computed(() => {
  return !!(fileStore.clipboard.item && fileStore.clipboard.operation);
});
</script>

<style scoped lang="scss">
// 样式已迁移到 src/styles/explorer.scss
// 这里只保留组件特有的样式覆盖（如果需要）
</style>
